<template>
  <div>
    <div class="from">
      <h3 class="title">新增赋值</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                class="bodernone"
                v-model="assignment.nickname"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="name">
              <el-input
                class="bodernone"
                v-model="assignment.phonenumber"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇款银行" prop="bank">
              <el-input v-model="ruleForm.bank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款银行" prop="payeeBank">
              <el-input v-model="ruleForm.payeeBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行凭证号" prop="serialNo">
              <el-input v-model="ruleForm.serialNo"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="汇款时间" prop="createTime">
              <!-- <el-input v-model="ruleForm.createTime"></el-input> -->
              <el-date-picker
              format="yyyy-MM-dd"
                v-model="ruleForm.createTime"
                type="date"
                 value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇款账号" prop="bankNo">
              <el-input v-model="ruleForm.bankNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款金额" prop="amount">
              <el-input v-model="ruleForm.amount"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="问金" prop="voucher">
              <el-input v-model="ruleForm.voucher"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            @click="submitForm('ruleForm')"
             :disabled="assignment.nickname == '' ? true : false"
            >立即创建</el-button
          >
          <el-button size="medium" @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
    </div>
    <h3 class="title">赋值记录</h3>
    <ComTable
      :config="config"
      :pagination="{
        total: pageing.total,
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
      }"
      :list="assignmenttable"
      :modes="consumptionModes"
    >
    </ComTable>
  </div>
</template>

<script>
import ComTable from "../../../components/comTable.vue";
import { addUserassignment } from "../../../newApi_3-24/askAround/index";

export default {
  name: "User",
  props: ["assignment", "assignmenttable"],
  components: { ComTable },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      formLabelWidth: "120px",
      ruleForm: {
        serialNo: "", //银行凭证
        bank: "", //收款银行
        bankNo: "", //汇款账号
        payeeBank: "", //汇款银行
        voucher: "", //问金
        amount: "", //汇款金额
        createTime: "", //汇款时间
      },
      rules: {
        serialNo: [
          { required: true, message: "请输入银行凭证", trigger: "blur" },
        ],
        payeeBank: [
          { required: true, message: "请输入收款银行", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入汇款银行", trigger: "blur" }],

        createTime: [
          { required: true, message: "请选择回款时间", trigger: "blur" },
        ],
        bankNo: [
          { required: true, message: "请输入汇款账号", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "请输入汇款金额", trigger: "blur" },
        ],
        voucher: [{ required: true, message: "请输入问金", trigger: "blur" }],
        // date1: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change",
        //   },
        // ],
        // date2: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change",
        //   },
        // ],
      },
      //圈主消费详情表格
      consumptionModes: [
        {
          showOverflowTooltip: true,
          width: 100,
          label: "日期",
          mode: "createTime",
        },
        {
          width: 100,
          label: "银行凭证号",
          mode: "serialNo",
          showOverflowTooltip: true,
        },
        {
          width: 100,
          label: "汇款银行",
          mode: "bank",
          showOverflowTooltip: true,
        },
        {
          width: 100,
          label: "收款银行",
          mode: "bank",
          showOverflowTooltip: true,
        },
        {
          width: 100,
          label: "汇款账号",
          mode: "bankNo",
          showOverflowTooltip: true,
        },
        {
          width: 120,
          label: "收款银行",
          mode: "payeeBank",
          showOverflowTooltip: true,
        },
        {
          width: 120,
          label: "金额（元）",
          mode: "amount",
          showOverflowTooltip: true,
        },
        {
          width: 160,
          label: "问金",
          mode: "voucher",
          showOverflowTooltip: true,
        },
      ],

      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },
  created() {
    //查询赋值记录
    // this.getUserassignmentfn();
  },
  methods: {
    //用户赋值新增
    async addUserassignmentfn() {
      let newform = {
        userId: this.assignment.id,
        serialNo: this.ruleForm.serialNo,
        bank: this.ruleForm.bank,
        bankNo: this.ruleForm.bankNo,
        amount: this.ruleForm.amount,
        voucher: this.ruleForm.voucher,
        payeeBank: this.ruleForm.payeeBank,
        createTime:this.ruleForm.createTime
      };
  
      let { code } = await addUserassignment(newform);
      if (code == 200) {
        this.$message({
          message: "恭喜你，这是一条成功消息",
          type: "success",
        });
        // this.$emit()
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addUserassignmentfn();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.assignment.nickname=""
      this.assignment.phonenumber=""
    },
  },
};
</script>

<style scoped>
>>> .from .bodernone .el-input__inner {
  border: 0;
}
.el-col-12 {
  height: 60px;
}

.title {
  text-align:left;
  margin: 20px;
  font-weight: 700;
}
</style>